<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能体表现数据看板</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
            color: #2d3748;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .header h1 {
            color: #2b6cb0;
            font-size: 2.5rem;
            margin-bottom: 10px;
            font-weight: 700;
        }
        
        .stats-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-left: 4px solid #4299e1;
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: #2b6cb0;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #718096;
            font-size: 0.9rem;
        }
        
        .analysis-section {
            background: white;
            margin-bottom: 30px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .section-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            font-size: 1.3rem;
            font-weight: 600;
        }
        
        .section-content {
            padding: 25px;
        }
        
        .chart-container {
            position: relative;
            height: 300px;
            margin-bottom: 20px;
        }
        
        .ranking-list {
            display: grid;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .ranking-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: #f7fafc;
            border-radius: 8px;
            border-left: 4px solid #4299e1;
        }
        
        .ranking-item:nth-child(1) { border-left-color: #f6ad55; }
        .ranking-item:nth-child(2) { border-left-color: #68d391; }
        .ranking-item:nth-child(3) { border-left-color: #9f7aea; }
        
        .ranking-title {
            font-weight: 600;
            color: #2d3748;
        }
        
        .ranking-value {
            font-weight: 700;
            color: #2b6cb0;
            font-size: 1.1rem;
        }
        
        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        @media (max-width: 768px) {
            .grid-2 {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .chart-container {
                height: 250px;
            }
        }
        
        .question-box {
            background: #e6fffa;
            border: 1px solid #81e6d9;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .question-box h4 {
            color: #234e52;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .question-box p {
            color: #2d3748;
            font-size: 0.95rem;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>AI智能体表现数据看板</h1>
            <p style="color: #718096; margin-top: 10px; font-size: 1.1rem;">
                Agentic AI Performance Dataset 2025 分析报告
            </p>
            <p style="color: #4299e1; margin-top: 5px; font-weight: 600;">
                实际处理数据记录数：5000 条
            </p>
        </div>

        <div class="stats-summary">
            <div class="stat-card">
                <div class="stat-number">57.3%</div>
                <div class="stat-label">平均准确率</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">58.9%</div>
                <div class="stat-label">平均效率分数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">77.4%</div>
                <div class="stat-label">平均公正性分数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">740</div>
                <div class="stat-label">支持多模态智能体数量</div>
            </div>
        </div>

        <div class="analysis-section">
            <div class="section-header">
                问题一：支持多模态处理的智能体类型占比排名前三
            </div>
            <div class="section-content">
                <div class="question-box">
                    <h4>分析问题</h4>
                    <p>支持多模态处理（multimodal_capability）的智能体类型（agent_type）在该智能体类型中的占比从大到小排名前三的智能体类型是那三个？</p>
                </div>
                <div class="ranking-list">
                    
        <div class="ranking-item">
            <div class="ranking-title">
                第1名: Customer Service
                <br><small style="color: #718096;">(58/340)</small>
            </div>
            <div class="ranking-value">17.1%</div>
        </div>
        <div class="ranking-item">
            <div class="ranking-title">
                第2名: Content Creator
                <br><small style="color: #718096;">(52/308)</small>
            </div>
            <div class="ranking-value">16.9%</div>
        </div>
        <div class="ranking-item">
            <div class="ranking-title">
                第3名: Social Media Manager
                <br><small style="color: #718096;">(52/315)</small>
            </div>
            <div class="ranking-value">16.5%</div>
        </div>
                </div>
                <div class="chart-container">
                    <canvas id="agentTypeChart"></canvas>
                </div>
            </div>
        </div>

        <div class="analysis-section">
            <div class="section-header">
                问题二：支持多模态处理的大模型架构占比排名前三
            </div>
            <div class="section-content">
                <div class="question-box">
                    <h4>分析问题</h4>
                    <p>支持多模态处理（multimodal_capability）的大模型架构（model_architecture）在该大模型架构中的占比从大到小排名前三的大模型架构是哪三个？</p>
                </div>
                <div class="ranking-list">
                    
        <div class="ranking-item">
            <div class="ranking-title">
                第1名: Mixtral-8x7B
                <br><small style="color: #718096;">(92/502)</small>
            </div>
            <div class="ranking-value">18.3%</div>
        </div>
        <div class="ranking-item">
            <div class="ranking-title">
                第2名: Falcon-180B
                <br><small style="color: #718096;">(81/511)</small>
            </div>
            <div class="ranking-value">15.9%</div>
        </div>
        <div class="ranking-item">
            <div class="ranking-title">
                第3名: CodeT5+
                <br><small style="color: #718096;">(72/467)</small>
            </div>
            <div class="ranking-value">15.4%</div>
        </div>
                </div>
                <div class="chart-container">
                    <canvas id="modelArchChart"></canvas>
                </div>
            </div>
        </div>

        <div class="analysis-section">
            <div class="section-header">
                问题三：各种智能体处理任务公正性中位数排名前三
            </div>
            <div class="section-content">
                <div class="question-box">
                    <h4>分析问题</h4>
                    <p>各种智能体处理任务（task_category）各自的智能体表现的公正性（bias detection）的中位数从高到低排名前三的是哪三种智能体处理任务？</p>
                </div>
                <div class="ranking-list">
                    
        <div class="ranking-item">
            <div class="ranking-title">第1名: Creative Writing</div>
            <div class="ranking-value">0.782</div>
        </div>
        <div class="ranking-item">
            <div class="ranking-title">第2名: Problem Solving</div>
            <div class="ranking-value">0.781</div>
        </div>
        <div class="ranking-item">
            <div class="ranking-title">第3名: Learning & Adaptation</div>
            <div class="ranking-value">0.778</div>
        </div>
                </div>
                <div class="chart-container">
                    <canvas id="biasChart"></canvas>
                </div>
            </div>
        </div>

        <div class="grid-2">
            <div class="analysis-section">
                <div class="section-header">
                    智能体类型分布
                </div>
                <div class="section-content">
                    <div class="chart-container">
                        <canvas id="allAgentTypesChart"></canvas>
                    </div>
                </div>
            </div>
            
            <div class="analysis-section">
                <div class="section-header">
                    模型架构分布
                </div>
                <div class="section-content">
                    <div class="chart-container">
                        <canvas id="allModelArchsChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 图表配置
        Chart.defaults.responsive = true;
        Chart.defaults.maintainAspectRatio = false;
        Chart.defaults.font.family = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';

        // 颜色配置
        const colors = [
            '#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#4bc0c0',
            '#9966ff', '#ff9f40', '#ff6384', '#c9cbcf', '#4bc0c0'
        ];

        // 问题一图表
        const ctx1 = document.getElementById('agentTypeChart').getContext('2d');
        new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: ["Customer Service", "Content Creator", "Social Media Manager"],
                datasets: [{
                    label: '多模态支持占比(%)',
                    data: [17.058823529411764, 16.883116883116884, 16.507936507936506],
                    backgroundColor: colors.slice(0, 3),
                    borderColor: colors.slice(0, 3),
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: '智能体类型多模态支持占比'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        }
                    }
                }
            }
        });

        // 问题二图表
        const ctx2 = document.getElementById('modelArchChart').getContext('2d');
        new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: ["Mixtral-8x7B", "Falcon-180B", "CodeT5+"],
                datasets: [{
                    label: '多模态支持占比(%)',
                    data: [18.326693227091635, 15.851272015655576, 15.417558886509635],
                    backgroundColor: colors.slice(3, 6),
                    borderColor: colors.slice(3, 6),
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: '模型架构多模态支持占比'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        }
                    }
                }
            }
        });

        // 问题三图表
        const ctx3 = document.getElementById('biasChart').getContext('2d');
        new Chart(ctx3, {
            type: 'bar',
            data: {
                labels: ["Creative Writing", "Problem Solving", "Learning & Adaptation"],
                datasets: [{
                    label: '公正性中位数',
                    data: [0.782, 0.7806, 0.77795],
                    backgroundColor: colors.slice(6, 9),
                    borderColor: colors.slice(6, 9),
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: '任务类别公正性中位数排名'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 1
                    }
                }
            }
        });

        // 智能体类型分布饼图
        const ctx4 = document.getElementById('allAgentTypesChart').getContext('2d');
        new Chart(ctx4, {
            type: 'doughnut',
            data: {
                labels: ["Customer Service", "Project Manager", "Marketing Assistant", "Research Assistant", "Email Manager", "HR Recruiter", "Document Processor", "Social Media Manager"],
                datasets: [{
                    data: [340, 332, 322, 321, 320, 318, 317, 315],
                    backgroundColor: colors
                }]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: '智能体类型分布'
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // 模型架构分布饼图
        const ctx5 = document.getElementById('allModelArchsChart').getContext('2d');
        new Chart(ctx5, {
            type: 'doughnut',
            data: {
                labels: ["InstructGPT", "Transformer-XL", "Claude-3.5", "Falcon-180B", "Mixtral-8x7B", "GPT-4o", "PaLM-2", "Gemini-Pro"],
                datasets: [{
                    data: [540, 530, 512, 511, 502, 494, 484, 481],
                    backgroundColor: colors
                }]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: '模型架构分布'
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    </script>
</body>
</html>